<template>
  <div class="mod-config" style="margin-bottom: 20px;">
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>Estate Cont</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/simplyrets' }">SDI Manager</el-breadcrumb-item>
    </el-breadcrumb> -->

    <el-row style="margin-bottom: 20px;">
      <el-col :span="14">
        <div class="grid-content bg-purple-light" style="padding: 7px 7px 7px 0;">
          <el-pagination
            background
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            :pager-count="pagerCount"
            style="margin: 0; text-align: left;"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-col>
      <el-col :span="10" class="searchipt">
        <div style="padding-top: 5px;">
          <el-input placeholder="Please enter the content">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>

    <el-table
      :data="dataList"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
      stripe
      :header-cell-style="{ 'background-color': '#E8F7F6' }"
      @row-dblclick="tabrowDbClick"
    >
      <el-table-column prop="mlsId" header-align="center" align="center" label="mlsId"/>
      <el-table-column prop="listPrice" header-align="center" align="center" label="listPrice"/>
      <el-table-column prop="address.full" header-align="center" align="center" label="streetName" min-width="150px" :show-overflow-tooltip="showToolTip"/>
      <el-table-column prop="address.city" header-align="center" align="center" label="city" min-width="150px"/>
      <el-table-column prop="property.bedrooms" header-align="center" align="center" label="bd"/>
      <el-table-column prop="property.bathsFull" header-align="center" align="center" label="ba"/>
      <el-table-column prop="property.area" header-align="center" align="center" label="sf"/>
      <el-table-column prop="office.servingName" header-align="center" align="center" label="servingName" min-width="200px" :show-overflow-tooltip="showToolTip"/>
    </el-table>

    <!-- 弹窗, 新增 / 修改 -->
    <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
  </div>
</template>

<script>
const axios = require("axios")
// import AddOrUpdate from './user-add-or-update'
// import moment from 'moment'
export default {
  components: {
    // AddOrUpdate
  },
  data() {
    return {
      dataForm: {
        key: ""
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      pagerCount: 5,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      showToolTip: true
    };
  },
  filters: {
    convertSeparator: function(num) {
      // var str = num + "";
      // var reg = /-?/d+/d{3}/;
      // while (reg.test(str)) {
      //     str = str.replace(reg, "$1,$2");
      // }
      // return str;
    },
    fmtNum: function(str) {
      // var str = typeof str == 'string' ? str : str + '';
      str = str + "";
      if (str == "null") return "";
      var newStr = "";
      var count = 0;
      // 当数字是整数
      if (str.indexOf(".") == -1) {
        for (var i = str.length - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr;
          } else {
            newStr = str.charAt(i) + newStr;
          }
          count++;
        }
        str = newStr; //自动补小数点后两位 + ".00"
        return "$" + str;
      }
      // 当数字带有小数
      else {
        for (var i = str.indexOf(".") - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr;
          } else {
            newStr = str.charAt(i) + newStr; //逐个字符相接起来
          }
          count++;
        }
        str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
        return "$" + str;
      }
    }
  },
  activated() {
    sessionStorage.getItem('limit') ? (this.pageSize = +sessionStorage.getItem('limit')) : (this.pageSize = 10)
    console.log('----- 每页数 -----', this.pageSize)
    this.getDataList()
  },
  methods: {
    setState(row, column) {
      return row.status === 1 ? "Available" : "Disable";
    },
    formatNum(str) {
      var str = typeof str == 'string' ? str : str + '';
      var newStr = "";
      var count = 0;
      if (str.indexOf(".") == -1) {
        for (var i = str.length - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr;
          } else {
            newStr = str.charAt(i) + newStr;
          }
          count++;
        }
        str = newStr;
        return str;
      } else {
        for (var i = str.indexOf(".") - 1; i >= 0; i--) {
          if (count % 3 == 0 && count != 0) {
            newStr = str.charAt(i) + "," + newStr;
          } else {
            newStr = str.charAt(i) + newStr;
          }
          count++;
        }
        str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
        return str;
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      var sdiId = sessionStorage.getItem('selectedSdiId')
      var params2 = {
        limit: this.pageSize,
        offset: (this.pageIndex - 1) * this.pageSize
      }
      console.log('----- 获取列表传参 -----', params2)
      this.$http({
        url: this.$http.adornUrl('/mclient/srts/sdi/'+sdiId),
        method: 'post',
        data: this.$http.adornData(params2)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log('----- 获取列表成功 -----', data)
          var list = data.results
          if(list && list.length) {
            list.map((item, index, arr) => {
              item.listPrice = '$'+this.formatNum(item.listPrice)
            })
          }
          this.dataList = list
          this.totalPage = parseInt(data.resultsNum)
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })

    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    // addOrUpdateHandle (id) {
    //   this.addOrUpdateVisible = true
    //   this.$nextTick(() => {
    //     this.$refs.addOrUpdate.init(id)
    //   })
    // },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.userId;
          });
      var _this = this
      _this.$confirm({//这个confirm是antUI的
        title: `Are you sure [id=${ids.join(',')}] will be [${id ? 'deleted' : 'deleted batch'}] ?`,
        content: '',
        onOk() {
          console.log('----- 删除 -----');
          _this.$http({
            url: _this.$http.adornUrl("/memberhpr/user/delete"),
            method: "post",
            data: _this.$http.adornData(ids, false)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              _this.$message.success('success', 1, function () {
                _this.getDataList()
              })
            } else {
              _this.$message.error(data.msg, 1)
            }
          })
        },
        onCancel() {
          console.log('----- 取消删除 -----');
        }
      })
    },
    // 发布/取消发布
    releaseHandle(row) {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/memberhpr/user/userStus/" + row.userId),
        method: "get",
        params: this.$http.adornParams({
          avalable: !row.status ? "1" : "0"
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("-----成功-----", data);
          this.getDataList();
        }
        this.dataListLoading = false;
      });
    },
    tabrowDbClick(row, event) {
      // console.log(JSON.stringify(row));
      sessionStorage.setItem("user", JSON.stringify(row));
      sessionStorage.setItem("actType", 0);
      this.$router.push({
        name: "cust-history",
        params: { userId: row.userId }
      });
    }
  }
};
</script>

<style scoped>
.box-card {
  width: 220px;
}
.bg-purple-light {
  /* background: #E8F7F6; */
}
.grid-content {
  padding: 2px;
  border-radius: 4px;
  min-height: 36px;
}
.searchipt {
  float: right;
}
</style>
